<script lang="ts" setup>
import { useLayoutInfo } from '@/common/composables/useLayoutInfo'
import { IconPath, PageTitle } from '@/common/constants'
import { searchActivityService, searchProjectService, searchService } from '@/common/service/search'
import { useHistoryStore } from '@/common/store'
import type { Activity } from '@/common/types/activity'
import type { Projects } from '@/common/types/projects'
import type { User } from '@/common/types/user'

const { searchHistory, addSearchHistory, clearSearchHistory } = useHistoryStore()

const { contentAreaHeight, safeBottom } = useLayoutInfo()

const searchText = ref(searchHistory)

// 公益活动
const projects = ref<Projects[]>([])
// 志愿者活动
const activity = ref<Activity[]>([])

/** 搜索内容 */
const queryText = ref('')

/** 搜索类型 */
type searchType = 'projects' | 'activity'

/** 搜索类型 */
const type = ref<searchType>('projects')

/** 是否已搜索 */
const isSearch = ref<boolean>(false)

const searchProject = async (text: string) => {
  const { data } = await searchProjectService(text ?? queryText.value)
  projects.value = data
}

const searchActivity = async (text: string) => {
  const { data } = await searchActivityService(text ?? queryText.value)

  activity.value = data
}

/** 搜索事件 */
const onSearch = async (q?: string) => {
  const text = queryText.value ? queryText.value : q

  if (!text?.trim())
    return

  // 添加历史
  addSearchHistory(text)

  // 如果在历史记录中找到了 就删除
  const index = searchText.value.indexOf(text)

  if (index !== -1) {
    searchText.value.splice(index, 1)
  }

  searchText.value = [text, ...searchText.value.filter(item => item !== text)]

  switch (type.value) {
    case 'projects':

      searchProject(text)
      break
    case 'activity':
      searchActivity(text)
      break
  }
  console.log(projects.value)

  isSearch.value = true
}

/** 修改类型 */
const onChangeType = (t: searchType) => {
  console.log('onChangeType')

  type.value = t
  onSearch()
}

/** 清空 */
const onClear = () => {
  uni.showModal({
    title: '温馨提示',
    content: '您确认要清空历史记录吗?',
    success(result) {
      if (result.confirm) {
        clearSearchHistory()
        searchText.value = []
      }
    },
  })
}

onLoad((options) => {
  if (!options)
    return
  if (!options.q || !options.type)
    return
  queryText.value = options.q
  type.value = options.type

  onSearch()
})
</script>

<template>
  <view class="search-container">
    <hope-nav-bar is-home-icon :title="PageTitle.SEARCH" />
    <view
      class="search-scroll-container" :style="{
        height: `${contentAreaHeight}px`,
        paddingBottom: `${safeBottom}px`,
      }"
    >
      <scroll-view scroll-y class="search-scroll-content">
        <view class="search-bar">
          <hope-search-bar v-model:model-value="queryText" type="search" @on-search="onSearch" />
        </view>
        <template v-if="!isSearch">
          <hope-search-text type="history" :text="searchText" />
          <view class="search-history-clear-button">
            <hope-button title="清空历史" @on-click="onClear" />
          </view>
        </template>

        <view v-else class="search-content">
          <view class="search-content-list">
            <text :class="[{ active: type === 'projects' }]" @click="() => onChangeType('projects')">
              公益项目
            </text>
            <text class="search-content-list-line">
              |
            </text>
            <text :class="[{ active: type === 'activity' }]" @click="() => onChangeType('activity')">
              志愿者活动
            </text>
            <text class="search-content-list-line">
              |
            </text>
          </view>
          <!-- 公益活动 -->
          <view v-if="type === 'projects'">
            <template v-if="projects.length > 0">
              <template v-for="project in projects" :key="project.id">
                <hope-projects :project="project" />
              </template>
            </template>
            <view v-else class="no-data">
              暂无关于 {{ queryText }} 的公益项目
            </view>
          </view>
          <!-- 志愿者活动 -->
          <view v-else-if="type === 'activity'">
            <template v-if="activity.length > 0">
              <view v-for="item in activity" :key="item.id" class="activity">
                <hope-activity :activity="item" />
              </view>
            </template>
            <view v-else class="no-data">
              暂无关于 {{ queryText }} 的志愿者活动
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.no-data {
  text-align: center;
  color: $uni-text-color-grey;
  padding-block: $padding-base;
}

.search {
  &-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden
  }
  &-scroll {
    background-color: $color-white;

    &-container {
      flex: 1;
      overflow: scroll;
      background-color: $color-white;
      padding-inline: $padding-base;
    }

    &-content {
      height: 100%;
      .search-bar {
        padding-top: $padding-base;
      }
    }
  }

  &-content {
    background-color: $color-white;

    &-list {
      text-align: center;
      padding: 20rpx;

      text {
        color: #bababa;
        font-size: 26rpx;
      }

      &-line {
        margin: 0 20rpx;
        color: #f3f3f3;
      }

      .active {
        color: red;
      }
    }

    &-user-list {
      padding-top: 10%;
      display: flex;
      width: 100%;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 50rpx;
    }
  }
}

.activity {
  height: 300rpx;
  margin-bottom: 30rpx;
}
</style>
